
<div class='topbar'>
  <div class='topbar__container container'>

    <div class='topbar__branding'>
      <a class='branding' href='{{ site.baseurl }}/'>
        <div class='branding-graphic'></div>
        <div class='branding-text'>FullCalendar</div>
      </a>
    </div>

    <div class='topbar__nav'>
      <div class='topbar__nav-item'>
        <a class='topbar__nav-handle' href='{{ site.baseurl }}/#demos'>
          Demos
        </a>
      </div>
      <div class='topbar__nav-item {%
        if page.is_docs
      %}topbar__nav-item--selected{%
        endif
      %}'>
        <a class='topbar__nav-handle' href='{{ site.baseurl }}/docs'>
          Docs
        </a>
      </div>
      <div class='topbar__nav-item {%
        if page.is_community
      %}topbar__nav-item--selected{%
        endif
      %}'>
        <div class='topbar__nav-handle'>
          Community
        </div>
        <div class='topbar__flyout-wrap'>
          <div class='topbar__flyout'>
            <div class='topbar__flyout-item'>
              <a class='topbar__flyout-handle' href='{{ site.baseurl }}/getting-help'>
                Getting Help
              </a>
            </div>
            <div class='topbar__flyout-item'>
              <a class='topbar__flyout-handle' href='{{ site.baseurl }}/reporting-bugs'>
                Reporting Bugs
              </a>
            </div>
            <div class='topbar__flyout-item'>
              <a class='topbar__flyout-handle' href='{{ site.baseurl }}/requesting-features'>
                Requesting Features
              </a>
            </div>
            <div class='topbar__flyout-item'>
              <a class='topbar__flyout-handle' href='{{ site.baseurl }}/contributing'>
                Contributing
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class='topbar__nav-item {%
        if page.is_license
      %}topbar__nav-item--selected{%
        endif
      %}'>
        <a class='topbar__nav-handle' href='{{ site.baseurl }}/license'>
          License
        </a>
      </div>
      <div class='topbar__nav-item'>
        <a class='topbar__nav-handle button button--lightblue button--outlined' href='{{ site.baseurl }}/purchase'>
          Premium
        </a>
      </div>
    </div>

    <div class='topbar__notice'>
      <a class='topbar__notice-link' href='{{ site.baseurl }}/blog/2020/02/changes-in-the-upcoming-v5'>
        <span style='color:#FAC863'>Feb 5</span> &mdash;
        Changes in the Upcoming v5
      </a>
    </div>

    <div class='topbar__github'>
      <a class='topbar__github-link' href='{{ site.fullcalendar_repo }}' target='_blank'>
        <!-- <div class='topbar__github-text'>view on GitHub</div> -->
        <div class='topbar__github-graphic'></div>
      </a>
    </div>

  </div>
</div>
